<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <br /><b>恐龙？？？？</b> <br />最后结束时间：
    <input type="text" v-model="start" />
    <br />游戏开始时间：
    <input type="text" v-model="end" />
    <p>{{ detail }}</p>
    <button @click="getSortList()" class="btn">计算数据</button>

    <!-- <detail msg="🍎河洛杠次结果🍌" :dataList="dataList" v-if="isShow" /> -->
    <template v-if="isShow">
      <h2>{{ msg }}</h2>
      <table class="table table-striped table-hover table-bordered">
        <!-- <caption>Optional table caption.</caption> -->
        <thead>
          <tr>
            <th>#</th>
            <th>名称</th>
            <th>最终得分</th>
            <th>明细</th>
            <th>原始数据</th>
            <!-- <th>大赢家数量</th> -->
            <!-- <th>操作</th> -->
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in dataList" :key="index">
            <th scope="row">{{ index + 1 }}</th>
            <td>{{ item.NickName }}</td>
            <td>{{ item.finalScore }}</td>
            <td>{{ item.score }}</td>
            <td>{{ item.origin.join(',') }}</td>
            <!-- <td>{{ item.totalWinner.join(',') }}</td> -->
            <!-- <td>
                            <i class="glyphicon-class glyphicon glyphicon-align-left" @click="getScore(item.score);"></i>
                            &nbsp;&nbsp;&nbsp;
                            <i class="glyphicon-class glyphicon glyphicon-option-horizontal" @click="getScore(item.origin);"></i>
                        </td> -->
          </tr>
        </tbody>
      </table>
    </template>

    <!-- toast -->
    <div class="toast" v-show="toastShow">{{ toastText }}</div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      msg: '🍎河洛杠次结果🍌',
      dataList: [],

      start: '',
      end: '',
      detail: '时间格式示例： 开始时间：2021-09-21 09:40:19 结束时间：2021-09-21 12:39:15',
      isShow: false,

      dataList: [],

      toastShow: false,
      toastText: '',

      isClick: false
    };
  },
  methods: {
    async getSortList() {
      if (this.isClick) {
        this.toast('已经在请求啦，请稍等');
        return;
      }
      // 关闭内容显示
      this.isShow = false;
      this.dataList = [];
      // 2020-02-24 02:08:51
      let temp1 = [...this.start.split(' ')[0].split('-'), ...this.start.split(' ')[1].split(':')];
      let t1 = `${temp1[0]}-${temp1[1]}-${temp1[2]} ${temp1[3]}:${temp1[4]}:${temp1[5]}`;

      let temp2 = [...this.end.split(' ')[0].split('-'), ...this.end.split(' ')[1].split(':')];
      let t2 = `${temp2[0]}-${temp2[1]}-${temp2[2]} ${temp2[3]}:${temp2[4]}:${temp2[5]}`;

      let start = new Date(t1.replace(/-/g, '/')).getTime();
      let end = new Date(t2.replace(/-/g, '/')).getTime();
      this.detail = t1 + '\t' + t2 + '\n' + start + '\t' + end;

      if (start && end) {
        console.log(start, end);
        this.toast('请求中，请稍等', 100000);
        this.isClick = true;
        let res = await this.$axios.post('api/getSortGameList', { start, end }).catch(err => {
          this.toast('访问服务器出错');
          this.isClick = false;
        });
        console.log(res);
        if (res.data.code == -1) {
          this.toast('查询出错', 1000);
          this.isClick = false;
          return;
        }
        if (res.data.length != 0) {
          console.log(res.data);
          this.dataList = res.data;
          this.toastShow = false;
          this.isShow = true;
          this.isClick = false;
        }
      } else {
        this.isShow = false;
        console.log('输入时间格式不正确');
        this.toast('输入时间格式不正确');
        this.isClick = false;
      }
    },
    // 查看分数详情
    getScore(str) {
      this.toast(str, 10000);
    },

    // toast
    toast(str, time = 1500) {
      let v = this;
      v.toastText = str;
      v.toastShow = true;
      setTimeout(function() {
        v.toastShow = false;
      }, time);
    }
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.btn {
  width: 100px;
  height: 40px;
  background-color: antiquewhite;
  font-size: 15px;
  font-weight: 1000;
}
.toast {
  position: fixed;
  z-index: 2000;
  left: 50%;
  top: 60%;
  transition: all 0.5s;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  text-align: center;
  border-radius: 5px;
  color: #fff;
  background: rgba(17, 17, 17, 0.7);
  height: auto;
  line-height: 45px;
  padding: 0 15px;
}
</style>
